feat(docker): add Docker support for frontend and backend with development and production configurations #91
Conversation
…pment and production configurations
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
backend/Dockerfile.dev
Outdated
| EXPOSE 5000 | ||
|
|
||
| # Start the server in dev mode using Yarn | ||
| CMD ["yarn", "dev"] |
There was a problem hiding this comment.
Change it to 'npm run dev'
backend/Dockerfile
Outdated
| EXPOSE 5000 | ||
|
|
||
| # Start the server in production mode using Yarn | ||
| CMD ["yarn", "start"] |
There was a problem hiding this comment.
Change it to 'npm start'
docker-compose.dev.yml
Outdated
| - /app/node_modules # Prevents node_modules inside the container from being overwritten | ||
| networks: | ||
| - app-network # Connects the backend to a custom Docker network | ||
|
|
There was a problem hiding this comment.
Can we have one docker compose for dev and prod?
…ucture docker-compose files
|
okay i have changed the docker files like you said,check out |
|
@mehul-m-prajapati why are you not merging this PR?? |
|
@md-asharaf : I need some time to test the same. |
|
when i created this pull request,there were no conflicts |
WalkthroughMultiple Docker-related configuration files have been introduced for both frontend and backend, supporting development and production environments. Supporting files such as Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Compose as docker-compose
participant FE as Frontend Container
participant BE as Backend Container
Dev->>Compose: Run docker compose --profile dev up --build
Compose->>FE: Build & start frontend (Dockerfile.dev)
Compose->>BE: Build & start backend (Dockerfile.dev)
FE->>Dev: Expose port 5173 (dev server)
BE->>Dev: Expose port 5000 (API)
sequenceDiagram
participant Dev as Developer
participant Compose as docker-compose
participant FEProd as Frontend Prod Container
participant BEProd as Backend Prod Container
Dev->>Compose: Run docker compose --profile prod up -d --build
Compose->>FEProd: Build frontend (Dockerfile.prod), serve with Nginx on port 3000
Compose->>BEProd: Build backend (Dockerfile.prod), run on port 5000
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
now review and merge @mehul-m-prajapati |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
package.json (1)
11-12: CLI consistency
docker:prodruns detached (-d) butdocker:devdoes not. If the team expects symmetrical behaviour (both foreground or both detached), consider aligning flags.backend/Dockerfile.dev (1)
19-20: Update stale comments to avoid confusionThe Dockerfile uses
npmbut the comments still reference Yarn.
Please adjust the wording to reflect the actual tooling.Dockerfile.prod (1)
27-38: Replace here-doc echo with a plain file – readability & layer cachingEmbedding the Nginx config via
echomakes diffs noisy and breaks layer caching.
Commit a dedicatednginx.confand copy it:-RUN echo $'\ -... -}' > /etc/nginx/conf.d/default.conf +COPY nginx.conf /etc/nginx/conf.d/default.confdocker-compose.yml (1)
12-15: Use a named volume fornode_modulesinstead of an anonymous path
- /app/node_modulescreates an anonymous volume each time the stack is rebuilt, clutteringdocker volume ls. Define it explicitly:volumes: - .:/app - frontend_node_modules:/app/node_modulesand add at the end of the file:
volumes: frontend_node_modules:(This applies similarly to the backend service.)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
.dockerignore(1 hunks).gitignore(1 hunks)Dockerfile.dev(1 hunks)Dockerfile.prod(1 hunks)backend/.dockerignore(1 hunks)backend/Dockerfile.dev(1 hunks)backend/Dockerfile.prod(1 hunks)backend/package.json(1 hunks)docker-compose.yml(1 hunks)package.json(2 hunks)
🔇 Additional comments (6)
.gitignore (1)
4-5: Re-evaluate excludingyarn.lockCommitting a lock-file is the usual way to guarantee deterministic installs in CI / Docker builds. By ignoring both the root and nested
yarn.lock, container builds may get nondeterministic dependency trees that drift over time.
Confirm that this project never relies on Yarn in any environment; otherwise consider keeping the lock-file in version control and merely omitting it from the Docker build context via.dockerignore.backend/package.json (1)
6-7: Separate dev / prod scripts look goodSplitting
"dev": "nodemon …"from"start": "node …"cleanly distinguishes hot-reload in dev from a lean prod entrypoint;nodemonis already indevDependencies..dockerignore (1)
1-9: Potentially over-aggressive exclusions
backend– Excluding the entire backend directory is fine for a frontend image, but double-check that no Dockerfile at the project root tries to build a full-stack image that would then lose the backend source.yarn.lock– Same reproducibility concern as in.gitignore; keeping the lockfile inside the image (but not necessarily in the git repo) usually shortens install time and freezes dependency versions.If either case is unintentional, adjust the patterns:
-backend +# backend # uncomment only if root image really doesn’t need itpackage.json (1)
7-8:vite --hostswitch is appropriateEnabling
--hostlets the dev server bind to 0.0.0.0, which is required inside Docker containers. Good catch.backend/.dockerignore (1)
1-5: Looks goodStandard exclusions keep images slim and leak-free; no issues spotted.
docker-compose.yml (1)
45-61: Port clash risk between dev and prod profilesBoth
backendandbackend-prodpublish5000:5000; if someone accidentally enables both profiles concurrently the compose up will fail. Consider publishing the prod port on a different host port (e.g.,5001:5000) or documenting the mutual exclusivity.
| # Copy package.json and yarn.lock files for dependency installation | ||
| COPY package.json ./ | ||
|
|
||
| # Install all dependencies using Yarn | ||
| RUN npm install | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Copy the lock-file and switch to npm ci for deterministic, cache-friendly installs
package-lock.json is not copied into the image, and npm install is used.
Without the lock-file Docker-layer caching breaks whenever only lock data changes, and builds are no longer reproducible.
-# Copy package.json and yarn.lock files for dependency installation
-COPY package.json ./
-
-# Install all dependencies using Yarn
-RUN npm install
+# Copy manifest + lock-file for proper layer caching
+COPY package*.json ./
+
+# Faster, deterministic install
+RUN npm ci📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Copy package.json and yarn.lock files for dependency installation | |
| COPY package.json ./ | |
| # Install all dependencies using Yarn | |
| RUN npm install | |
| # Copy manifest + lock-file for proper layer caching | |
| COPY package*.json ./ | |
| # Faster, deterministic install | |
| RUN npm ci |
🤖 Prompt for AI Agents
In backend/Dockerfile.dev around lines 7 to 12, the Dockerfile copies only
package.json but not the package-lock.json, and uses npm install which is less
deterministic. To fix this, copy both package.json and package-lock.json into
the image, then replace npm install with npm ci to ensure deterministic,
cache-friendly installs and better Docker layer caching.
| # Copy package.json and yarn.lock files for dependency installation | ||
| COPY package.json ./ | ||
|
|
||
| # Install production dependencies using Yarn | ||
| RUN npm install --production | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Production image installs without lockfile and misses NODE_ENV
- Lock-file is not copied – image layers break whenever dependencies drift.
npm install --productionis fine, but setNODE_ENV=productionto ensure downstream libs behave correctly.- Comment still says Yarn.
-# Copy package.json and yarn.lock files for dependency installation
-COPY package.json ./
-# Install production dependencies using Yarn
-RUN npm install --production
+# Copy manifest + lock-file
+COPY package*.json ./
+
+# Install only prod deps in a reproducible way
+ENV NODE_ENV=production
+RUN npm ci --only=production📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Copy package.json and yarn.lock files for dependency installation | |
| COPY package.json ./ | |
| # Install production dependencies using Yarn | |
| RUN npm install --production | |
| # Copy manifest + lock-file | |
| COPY package*.json ./ | |
| # Install only prod deps in a reproducible way | |
| ENV NODE_ENV=production | |
| RUN npm ci --only=production |
🤖 Prompt for AI Agents
In backend/Dockerfile.prod around lines 7 to 12, fix the Dockerfile by copying
the lockfile (e.g., yarn.lock or package-lock.json) alongside package.json to
ensure consistent dependency versions. Update the comment to reflect the correct
package manager used (npm, not Yarn). Also, set the environment variable
NODE_ENV=production before running npm install --production to ensure proper
production behavior of dependencies.
| COPY package.json . | ||
|
|
||
| RUN npm install | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Lock-file omitted – builds will be slow and non-reproducible
Identical to the backend dev image, copy the lock-file and prefer npm ci:
-COPY package.json .
-RUN npm install
+COPY package*.json ./
+RUN npm ci🤖 Prompt for AI Agents
In Dockerfile.dev around lines 6 to 9, the lock-file (package-lock.json or
yarn.lock) is missing, causing slow and non-reproducible builds. Copy the
lock-file into the image alongside package.json and replace `npm install` with
`npm ci` to ensure faster, consistent, and reproducible installs.
| # Install production dependencies using Yarn | ||
| RUN npm install --production | ||
| # Copy the rest of the application files | ||
| COPY . . | ||
|
|
||
| # Build the frontend using Yarn | ||
| RUN npm run build | ||
|
|
There was a problem hiding this comment.
Build will fail – --production strips devDependencies needed for vite build
The build stage installs only production deps, but the vite CLI lives in devDependencies; npm run build will therefore exit with ENOENT.
-# Install production dependencies using Yarn
-RUN npm install --production
+# Install all deps required for the build
+COPY package*.json ./
+RUN npm ciIf you want a slim final image, keep npm ci here and afterwards do a separate, lighter stage (or npm prune --production) after the build completes.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Install production dependencies using Yarn | |
| RUN npm install --production | |
| # Copy the rest of the application files | |
| COPY . . | |
| # Build the frontend using Yarn | |
| RUN npm run build | |
| # Install all deps required for the build | |
| COPY package*.json ./ | |
| RUN npm ci | |
| # Copy the rest of the application files | |
| COPY . . | |
| # Build the frontend using Yarn | |
| RUN npm run build |
🤖 Prompt for AI Agents
In Dockerfile.prod around lines 10 to 17, the build fails because `npm install
--production` removes devDependencies, including the `vite` CLI needed for the
build. To fix this, install all dependencies (including devDependencies) before
running `npm run build`, then create a separate lighter stage or run `npm prune
--production` after the build to remove devDependencies for the final image.
| "postcss": "^8.4.47", | ||
| "autoprefixer": "^10.4.20", | ||
| "tailwindcss": "^3.4.14" |
There was a problem hiding this comment.
Duplicate autoprefixer entry
autoprefixer now appears in both dependencies and devDependencies, causing npm/yarn warnings and a larger prod image.
@@
- "postcss": "^8.4.47",
- "autoprefixer": "^10.4.20",
- "tailwindcss": "^3.4.14"
+ "postcss": "^8.4.47",
+ "tailwindcss": "^3.4.14"
@@
- "autoprefixer": "^10.4.20",Move it to one block (usually devDependencies for build-time CSS processing).
Also applies to: 41-41
🤖 Prompt for AI Agents
In package.json around lines 28 to 30 and line 41, the package "autoprefixer" is
listed in both dependencies and devDependencies, causing duplication warnings
and increasing production image size. Remove the "autoprefixer" entry from the
dependencies section and keep it only in devDependencies, as it is typically
used for build-time CSS processing.
|
@md-asharaf bhai jinda ho abhi bhi? |
|
🎉🎉 Thank you for your contribution! Your PR #91 has been merged! 🎉🎉 |
2 participants
Related Issue
Closes: #76
Description
This PR introduces Docker support for both the frontend and backend, with separate configurations for development and production environments.
It also adds Docker Compose profiles, allowing developers to easily switch between modes:
Development Mode
Supports live reloading for both frontend and backend.
Production Mode
Builds and runs optimized containers.
Alternatively, two convenience scripts have been added:
docker:dev– Starts the app in development modedocker:prod– Builds and runs the app in production modeHow Has This Been Tested?
docker compose --profile dev up --buildto verify live updates.docker compose --profile prod up --buildfor production readiness.Type of Change
Summary by CodeRabbit
New Features
Chores